<template>
	<view class="login-page">
		<view class="main">
			<view class="back" @click="back"></view>
			<view class="tel-box">
				<u--input class="talInput" shape="circle" placeholderStyle="color:#939393; paddingLeft:10rpx"
					placeholder="请输入手机号" v-model="tel"></u--input>
			</view>
			<view class=" code-box">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<!-- #ifndef APP-NVUE -->
						<u-input class="codeInput" maxlength="6" placeholderStyle="color:#939393; paddingLeft:10rpx"
							v-model="code" shape="circle" placeholder="请输入验证码">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input>
							<!-- #endif -->
								<template slot="suffix">
									<view class="get-code">
										<u-code ref="uCode" @change="codeChange" seconds="120"
											changeText="X秒重新获取"></u-code>
										<u-text @tap="getCode" color="#939393" :text="tips" size="mini"></u-text>
									</view>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="login-btn" @click="login">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	export default {
		data() {
			return {
				tel: "",
				code: "",
				tips: '',
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		methods: {
			//返回
			back() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			//获取验证码
			getCode() {
				let reg = /^(?:(?:\+|00)86)?1\d{10}$/
				if (!reg.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else {
					if (this.$refs.uCode.canGetCode) {
						setTimeout(() => {
							this.$refs.uCode.start();
						}, 1000);
						http.post('/api/login/send_code', {
							mobile: this.tel,
							type: "login"
						}).then(res => {
							// uni.showToast({
							// 	title: res.data.msg,
							// 	icon: "none",
							// 	duration: 1000
							// })
						}).catch(err => {
							console.log(err);
							uni.showToast({
								title: err.data.msg,
								icon: "none",
								duration: 2000
							})
						})

					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			},
			//登录
			login() {
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				http.post('/api/login/register', {
					mobile: this.tel,
					code: this.code
				}).then(res => {
					console.log('res', res.userInfo.token);
					uni.setStorageSync('token', res.userInfo.token)
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/my/my"
						})
					}, 1500)
				}).catch(err => {
					uni.showToast({
						title: err.data.msg,
						icon: "none",
						duration: 1500
					})
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.main {
			width: 80%;
			height: 1000rpx;
			margin: auto;

			.back {
				width: 50rpx;
				height: 50rpx;
				margin-top: 50rpx;
				background-image: url("../../static/leftArrow_black.svg");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.tel-box {
				width: 100%;
				display: flex;
				margin-top: 250rpx;

				.talInput {
					height: 70rpx;
					background-color: #e2e2e2;
				}
			}

			.code-box {
				width: 100%;
				margin-top: 50rpx;

				.codeInput {
					height: 70rpx;
					background-color: #e2e2e2;
				}

				.get-code {
					background-color: white;
					padding: 10rpx;
					border-radius: 50rpx;
				}
			}

			.login-btn {
				width: 100%;
				height: 80rpx;
				background-color: #e2e2e2;
				border-radius: 50rpx;
				margin-top: 650rpx;
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
				color: #939393;
				font-size: 36rpx;
			}
		}
	}
</style>